<template>
  <div class="vertical-bar-echart">
    <div class="title">{{ title }}</div>
    <div
      :class="domObj"
      style="height:5rem;" class="vertical-bar" />
    <div
      v-if="isShowUnit"
      class="unit">
      <p>单位：{{ unit }}</p>
    </div>
    <!-- <div
      v-if="isShowUnit"
      class="province clearfix">
      <p class="fl"/>
      <p class="fl">{{ areaName }}</p>
    </div> -->
    <none-data v-if="isShowNoneData"/>
  </div>
</template>
<script>
import noneData from '@/components/noneData/noneData'
export default {
  components: {
    noneData
  },
  props: {
    domObj: {
      type: String,
      default: ''
    },
    xAxisData: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      isShowNoneData: false,
      isShowUnit: true,
      areaName: '管辖区域',
      unit: '',
      title: '',
      charts: ''
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    disposed () {
      if (this.charts) {
        this.charts.dispose()
      }
    },
    vBarFn (xAxisData, yaisx) {
      let runningBrokeLine = this.charts = this.$echarts.init(document.querySelector('.' + this.domObj))
      let xData = xAxisData || []
      let lineOption = {
        /* title: {
          text: title,
          top: 2,
          left: 15,
          textStyle: {
            fontSize: 14,
            color: '#fff'
          }
        }, */
        xAxis: {
          type: 'category',
          show: true,
          data: xData,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#138cef'
            },

            interval: function (index) {
              return index === 0 || index === (xData.length - 1)
            }
          // rotate: -30,
          },
          axisTick: false,
          grid: {
            y2: 140
          },

          axisLine: {
            lineStyle: {
              color: '#65c4ea'
            }
          }

        },

        yAxis: {
          type: 'value',
          minInterval: 1,
          axisLabel: {
            show: true,
            formatter: '{value}',
            textStyle: {
              color: '#138cef'
            }
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: '#222'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#65c4ea'
            }
          }
        },
        series: [{
          name: '',
          type: 'bar',
          barMaxWidth: 15,
          barMinHeight: 1,
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 2, [{
                offset: 0,
                color: 'rgba(52, 120, 245,.8)'
              }, {
                offset: 1,
                color: 'rgba(6, 6, 17,.1)'
              }])
            }
          },
          itemStyle: {
            normal: {
              color: '#138cef',
              itemWidth: 20,
              lineStyle: {
                color: '#4e78e6'
              }
            }
          },
          data: yaisx || []

        }]
      }
      runningBrokeLine.setOption(lineOption)
    },
    xAxisDatas (data, title, yaisx, cityName, unit) {
      this.disposed()
      if (cityName) {
        this.areaName = cityName
      }
      this.isShowNoneData = data.length === 0
      this.isShowUnit = !this.isShowNoneData
      this.unit = unit
      if (data[0]) {
        this.vBarFn(data, yaisx)
      }

      this.title = title
    },
    init () {
      let getRole = JSON.parse(sessionStorage.getItem('getRole'))
      this.areaName = getRole.areaName
    }
  }
}

</script>
<style lang="scss" scoped>
.vertical-bar-echart{
  position: relative;
  margin-bottom: .20rem;
  .title{
    font-size: .32rem;
    line-height: 160%;
    margin-bottom: .10rem;
    color:#65c4ea;
    background:rgba(47,60,134,.35);

  }
  .vertical-bar{
    border: 1px solid rgba(121, 196, 238, .35);
    background:rgba(47,60,134,.35);
  }
  .unit {
    position: absolute;
    top: 20%;
    left: 1%;
    p {
      font-size: .24rem;
      color: #138cef;
      width: 1.6rem;
      text-align: left;
    }
  }
  // .province {
  //   position: absolute;
  //   bottom: 5%;
  //   right: 6%;
  //   line-height: .40rem;
  //   p:nth-child(1) {
  //     width: .20rem;
  //     height: .20rem;
  //     background: #4fd4f7;
  //     margin-top: .08rem;
  //     margin-right: .10rem;
  //   }
  //   p:nth-child(2) {
  //     font-size: .26rem;
  //     color: #4fd4f7;
  //   }
  // }
}

</style>
